{% extends 'tasks/base.html' %}

{% block title %}{{ task.title }}{% endblock %}

{% block content %}
    <div class="card">
        <div class="card-header d-flex justify-content-between align-items-center">
            <h1>{{ task.title }}</h1>
            <div>
                <a href="{% url 'task-list' %}" class="btn btn-secondary">返回任务列表</a>
                <a href="{% url 'task-update' task.id %}" class="btn btn-warning">编辑</a>
                <a href="{% url 'task-delete' task.id %}" class="btn btn-danger">删除</a>
            </div>
        </div>
        <div class="card-body">
            <!-- 基本信息 -->
            <div class="row mb-4">
                <div class="col-md-4">
                    <h5>状态</h5>
                    {% if task.status == 'todo' %}
                        <span class="badge bg-danger">待办</span>
                    {% elif task.status == 'in_progress' %}
                        <span class="badge bg-warning text-dark">进行中</span>
                    {% else %}
                        <span class="badge bg-success">已完成</span>
                    {% endif %}
                </div>
                <div class="col-md-4">
                    <h5>项目名称</h5>
                    <p>{{ task.Projectname|default:"未指定" }}</p>
                </div>
                <div class="col-md-4">
                    <h5>系统</h5>
                    <p>{{ task.system|default:"未指定" }}</p>
                </div>
            </div>

            <!-- 人员角色 -->
            <h4 class="mt-4 mb-3 border-bottom pb-2">人员角色</h4>
            <div class="row mb-4">
                <div class="col-md-3">
                    <h5>项目经理</h5>
                    <p>{{ task.ProjectManager|default:"未指定" }}</p>
                </div>
                <div class="col-md-3">
                    <h5>产品经理</h5>
                    <p>{{ task.ProductManager|default:"未指定" }}</p>
                </div>
                <div class="col-md-3">
                    <h5>开发工程师</h5>
                    <p>{{ task.DevelopmentEngineer|default:"未指定" }}</p>
                </div>
                <div class="col-md-3">
                    <h5>测试工程师</h5>
                    <p>{{ task.TestEngineer|default:"未指定" }}</p>
                </div>
            </div>

            <!-- 分配信息 -->
            <div class="row mb-4">
                <div class="col-md-6">
                    <h5>分配给</h5>
                    <p>
                        {% if task.assigned_to %}
                            {{ task.assigned_to.username }}
                        {% else %}
                            <span class="anonymous-badge">未分配</span>
                        {% endif %}
                    </p>
                </div>
                <div class="col-md-6">
                    <h5>创建者</h5>
                    <p>
                        {% if task.created_by %}
                            {{ task.created_by.username }}
                        {% else %}
                            <span class="anonymous-badge">匿名用户</span>
                        {% endif %}
                    </p>
                </div>
            </div>

            <!-- 链接 -->
            <h4 class="mt-4 mb-3 border-bottom pb-2">相关链接</h4>
            <div class="row mb-4">
                <div class="col-md-6">
                    <h5>需求链接</h5>
                    {% if task.Demandlink %}
                        <a href="{{ task.Demandlink }}" target="_blank" class="btn btn-sm btn-outline-primary">
                            打开需求链接
                        </a>
                        {{ task.Demandlink }}
                    {% else %}
                        <p>未提供</p>
                    {% endif %}
                </div>
                <div class="col-md-6">
                    <h5>测试链接</h5>
                    {% if task.Testlink %}
                        <a href="{{ task.Testlink }}" target="_blank" class="btn btn-sm btn-outline-primary">
                            打开测试链接
                        </a>
                        {{ task.Testlink }}

                    {% else %}
                        <p>未提供</p>
                    {% endif %}
                </div>
            </div>

            <!-- 日期和进度 -->
            <h4 class="mt-4 mb-3 border-bottom pb-2">日期和进度</h4>
            <div class="row mb-4">
                <div class="col-md-4">
                    <h5>开始日期</h5>
                    <p>{{ task.startdate|default:"未设置" }}</p>
                </div>
                <div class="col-md-4">
                    <h5>结束日期</h5>
                    <p>{{ task.enddate|default:"未设置" }}</p>
                </div>
                <div class="col-md-4">
                    <h5>截止日期</h5>
                    <p>{{ task.due_date|default:"未设置" }}</p>
                </div>
            </div>

            <div class="row mb-4">
                <div class="col-md-6">
                    <h5>测试计划</h5>
                    <p>{{ task.testschedule|default:"未提供" }}</p>
                </div>
                <div class="col-md-6">
                    <h5>测试进度</h5>
                    <div class="progress">
                        <div class="progress-bar progress-bar-striped progress-bar-animated" role="progressbar" style="width: {{ task.testprogress }}%;"
                             aria-valuenow="{{ task.testprogress }}" aria-valuemin="0" aria-valuemax="100">
                            {{ task.testprogress }}%
                        </div>
                    </div>
                </div>
            </div>

            <!-- 图片数据 -->
            {% if task.Picturedata or task.images.all %}
                <h4 class="mt-4 mb-3 border-bottom pb-2">图片数据</h4>

                <!-- 主图片 -->
                {% if task.Picturedata %}
                    <div class="row mb-4">
                        <div class="col-12">
                            <h5>主图片</h5>
                            <!-- 使图片可点击，打开模态框 -->
                            <a href="#" data-bs-toggle="modal" data-bs-target="#mainImageModal">
                                <img src="{{ task.Picturedata.url }}" alt="任务主图片" class="img-fluid rounded"
                                     style="max-height: 300px; cursor: pointer;">
                            </a>
                            <div class="mt-2">
                                <small class="text-muted">点击图片可查看大图</small>
                            </div>
                        </div>
                    </div>

                    <!-- 主图片查看模态框 -->
                    <div class="modal fade" id="mainImageModal" tabindex="-1" aria-labelledby="mainImageModalLabel"
                         aria-hidden="true">
                        <div class="modal-dialog modal-xl">
                            <div class="modal-content">
                                <div class="modal-header">
                                    <h5 class="modal-title" id="mainImageModalLabel">主图片查看</h5>
                                    <button type="button" class="btn-close" data-bs-dismiss="modal"
                                            aria-label="Close"></button>
                                </div>
                                <div class="modal-body text-center">
                                    <img src="{{ task.Picturedata.url }}" alt="任务主图片" class="img-fluid">
                                </div>
                                <div class="modal-footer">
                                    <a href="{{ task.Picturedata.url }}" class="btn btn-primary"
                                       target="_blank">在新标签页中打开</a>
                                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">关闭
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>
                {% endif %}
                <!-- 额外图片 -->
                {% if task.images.all %}
                    <div class="row mb-4">
                        <div class="col-12">
                            <h5>额外图片</h5>
                            <div class="row">
                                {% for image in task.images.all %}
                                    <div class="col-md-4 mb-3">
                                        <div class="card">
                                            <a href="#" data-bs-toggle="modal"
                                               data-bs-target="#extraImageModal{{ image.id }}">
                                                <img src="{{ image.image.url }}" class="card-img-top" alt="额外图片"
                                                     style="height: 150px; object-fit: cover; cursor: pointer;">
                                            </a>
                                            <div class="card-body">
                                                <p class="card-text">{{ image.caption|default:"无说明" }}</p>
                                            </div>
                                        </div>

                                        <!-- 额外图片查看模态框 -->
                                        <div class="modal fade" id="extraImageModal{{ image.id }}" tabindex="-1"
                                             aria-labelledby="extraImageModalLabel{{ image.id }}" aria-hidden="true">
                                            <div class="modal-dialog modal-xl">
                                                <div class="modal-content">
                                                    <div class="modal-header">
                                                        <h5 class="modal-title" id="extraImageModalLabel{{ image.id }}">
                                                            图片查看</h5>
                                                        <button type="button" class="btn-close" data-bs-dismiss="modal"
                                                                aria-label="Close"></button>
                                                    </div>
                                                    <div class="modal-body text-center">
                                                        <img src="{{ image.image.url }}" alt="任务图片"
                                                             class="img-fluid">
                                                        {% if image.caption %}
                                                            <p class="mt-3">{{ image.caption }}</p>
                                                        {% endif %}
                                                    </div>
                                                    <div class="modal-footer">
                                                        <a href="{{ image.image.url }}" class="btn btn-primary"
                                                           target="_blank">在新标签页中打开</a>
                                                        <button type="button" class="btn btn-secondary"
                                                                data-bs-dismiss="modal">关闭
                                                        </button>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                {% endfor %}
                            </div>
                        </div>
                    </div>
                {% endif %}
            {% endif %}


            <div class="mb-3 ">
                <button class="btn btn-primary" type="button" data-bs-toggle="offcanvas"
                        data-bs-target="#offcanvasWithBothOptions" aria-controls="offcanvasWithBothOptions">查看测试过程

                </button>

                <div class=" offcanvas offcanvas-start bg-info-subtle" data-bs-scroll="true" tabindex="-1"
                     id="offcanvasWithBothOptions" aria-labelledby="offcanvasWithBothOptionsLabel">
                    <div class="offcanvas-header ">
                        <h5 class="offcanvas-title " id="offcanvasWithBothOptionsLabel">测试过程</h5>
                        <button type="button" class="btn-close" data-bs-dismiss="offcanvas"
                                aria-label="Close"></button>
                    </div>
                    <div class="offcanvas-body">
                        {% if task.Testingprocess %}
                            <div class=" col-la-10 p-lg-3 bg-info-subtle">
                            {{ task.Testingprocess|linebreaks }}
                            </div>
                        {% else %}
                            <p>待添加测试过程</p>
                        {% endif %}

                    </div>
                </div>
            </div>
            <!-- 描述和备注 -->
            <h4 class="mt-4 mb-3 border-bottom pb-2">描述</h4>
            <div class="card mb-4">
                <div class="card-body " style="border-style: outset">
                    {{ task.description|linebreaks|default:"未提供描述。" }}
                </div>
            </div>

            <h4 class="mt-4 mb-3 border-bottom pb-2">备注</h4>
            <div class="card mb-4">
                <div class="card-body" style="border-style: outset">
                    {{ task.Remarks|linebreaks|default:"未提供备注。" }}
                </div>
            </div>

            <!-- 系统信息 -->
            <div class="row mb-3 text-muted">
                <div class="col-md-6">
                    <small>创建时间: {{ task.created_at }}</small>
                </div>
                <div class="col-md-6">
                    <small>最后更新: {{ task.updated_at }}</small>
                </div>
            </div>
        </div>
        <div class="card-footer">
            <a href="{% url 'task-list' %}" class="btn btn-secondary">返回任务列表</a>
        </div>
    </div>
{% endblock %}